<template>
	<view class="index">
		<view class="input-wrapper">
			<view class="label">
				原密码
			</view>
			<input type="password" class="input" placeholder="请输入" v-model="oldPassword">
		</view>
		<view class="input-wrapper">
			<view class="label">
				新密码
			</view>
			<input type="password" class="input" placeholder="请输入" v-model="password">
		</view>
		<view class="input-wrapper">
			<view class="label">
				确认密码
			</view>
			<input type="password" class="input" placeholder="请输入" v-model="newPassword">
		</view>

		<view class="btn-wrapper" @click="submit">
			确定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldPassword: '',
				password: '',
				newPassword: '',
				disabled: false
			}
		},
		mounted() {

		},
		methods: {
			async submit() {
				if (this.disabled) return
				if (!this.oldPassword) {
					uni.showToast({
						title: '请输入原密码',
						icon: 'none'
					})
					return
				}
				if (!this.password) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					})
					return
				}
				const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;
				if (!regex.test(this.password)) {
					uni.showToast({
						title: '密码必须是六位及以上数字+字母组合',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.newPassword) {
					uni.showToast({
						title: '请输入确认密码',
						icon: 'none'
					})
					return
				}
				if (this.newPassword !== this.password) {
					uni.showToast({
						title: '两次输入密码不一致',
						icon: 'none'
					})
					return
				}
				this.disabled = true;
				const data = await this.$api.put('/system/user/profile/updatePwd?oldPassword=' + this.oldPassword +
					'&newPassword=' + this.newPassword)
				if (data.code === 200) {
					uni.showToast({
						title: '修改成功，请重新登录~',
						icon: 'none'
					})
					setTimeout(() => {
						this.$store.commit('setToken', '')
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}, 1000)
				} else {
					this.disabled = false;
				}
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		.input-wrapper {
			height: 98upx;
			background-color: #ffffff;
			margin-top: 2upx;
			padding: 0 32upx;
			display: flex;
			align-items: center;

			.value {
				flex: 1;
				text-align: right;
			}

			.input {
				flex: 1;
				padding: 0 40upx;
			}

			.btn {
				padding: 0 30upx;
				height: 60upx;
				border: 2upx solid #cecece;
				border-radius: 10upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28upx;
				color: #0E932E;

				&:active {
					background-color: #f4f4f4;
				}

				&.disabled {
					color: #787878;
					background-color: #ffffff !important;
				}
			}
		}

		.btn-wrapper {
			margin: 60upx 30upx;
			height: 86upx;
			border-radius: 50upx;
			background-color: #555BFF;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: .1s linear;

			&:active {
				background-color: #555BFF99;
			}
		}
	}
</style>